<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频标签video与音频标签audio </title>
    <style>
        video {
            width: 100%;
            margin-top: 100px;
        }
    </style>
      <!-- 视频的格式通常用MP4，可以兼容大部分浏览器 -->
      <!-- 音频的格式通常用MP3，也是兼容大部分浏览器 -->
      <!-- 这两者都有兼容性写法 就是另外加上几种格式属性值以视频为例： -->
      <!-- <video src="">
          <source src="movie.mp4" type="video/mp4" >
           <source src="movie.ogg" type="video/ogg">
           您的浏览器不支持video标签
      </video> -->

</head>
<body>
    <!-- 1 autoplay：自动播放的意思，谷歌默认不支持，想要实现必须添加静音属性muted -->
    <!-- 2 muted：静音播放的意思 -->
    <!-- 3 controls：播放控件 暂停 静音 全屏 读条这些东西 谷歌和ie显示出的播放控件不相同 所以一般通过JS来实现 controls不常用 -->
    <!-- 4 loop：无线循环播放的意思 -->
    <!-- 5 poster加载等待图片：用于网速慢时视频没加载好预先显示一张图片 -->
    <video src="media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster="media/mi9.jpg"></video>
    <!-- 在谷歌浏览器里音频也是禁止自动播放的 后面可以通过js实现 这里暂且加控件属性controls来实现 -->
    <!-- 不同的是视频标想要在谷歌浏览器里自动播放直接加上静音播放属性muted就可以实现了。这是视频与音频的区别 -->
    <audio src="media/music.mp3" controls="controls"></audio>
</body>
</html>